<template>
  <el-dialog title="简介详情" :visible.sync="insectVisible" width="1000px" :before-close="handleClose">
    <div class="pest-dialog">
      <ul class="top-content">
        <li>
          <el-carousel trigger="click" height="180px" arrow="always" style="width:220px" :autoplay="false">
            <el-carousel-item v-for="(item,index) in imgList" :key="index">
              <img :src="item" style="width:220px;height:180px" />
            </el-carousel-item>
          </el-carousel>
        </li>
        <li>
          <ul>
            <li>名称：</li>
            <li>{{row.diseaseName}}</li>
          </ul>
          <ul>
            <li>英文名：</li>
            <li>{{row.diseaseNameEng ? row.diseaseNameEng : '无' }}</li>
          </ul>
          <ul>
            <li>简介：</li>
            <li>{{row.diseaseIntro}}</li>
          </ul>
        </li>
      </ul>
      <div class="paragraph">
        <p>危害症状</p>
        <p>{{row.damageSym ? row.damageSym : '无'}}</p>
      </div>
      <div class="paragraph">
        <p>形态</p>
        <p>{{row.morphology ? row.morphology : '无'}}</p>
      </div>
      <div class="paragraph">
        <p>习性</p>
        <p>{{row.habits ? row.habits : '无'}}</p>
      </div>
      <div class="paragraph">
        <p>农业防治</p>
        <p>{{row.cmethod ? row.cmethod : '无'}}</p>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    row: {
      type: Object
    },
    imgList: {
      type: Array,
      default: () => [],
    }
  },
  data () {
    return {
      insectVisible: false
    };
  },
  methods: {
    onShow () {
      this.insectVisible = true
    },
    handleClose () {
      this.insectVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.pest-dialog {
  .top-content {
    height: 200px;
    li {
      padding: 6px 10px;
    }
    li:first-child {
      font-weight: bold;
      color: #333;
      float: left;
    }
  }
  .paragraph {
    padding: 6px 15px;
    border-top: 2px solid #f3f6fc;
    p {
      line-height: 22px;
    }
    p:first-child {
      font-weight: bold;
      color: #333;
    }
  }
}
</style>